<script lang="ts" setup>
import { ref, watch } from 'vue'
import { type RouteLocationMatched, useRouter, useRoute } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'

import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

const route = useRoute()
const router = useRouter()

// 生成数组数据
const breadcrumbData = ref<RouteLocationMatched[]>([])
const getBreadcrumbData = () => {
  breadcrumbData.value = route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}

// Click Breadcrumb
const onBreadcrumbClick = (item: RouteLocationMatched, index: number) => {
  if (index !== breadcrumbData.value.length - 1) router.push(item.path)
}

// 监听路由变化时触发
watch(
  route,
  r => {
    // if you go to the redirect page, do not update the breadcrumbs
    if (r.path.startsWith('/redirect/')) {
      return
    }
    getBreadcrumbData()
  },
  { immediate: true }
)
</script>
<template>
  <div id="breadcrumb" :class="['breadcrumb', 'mask-image', appStore.breadcrumbIcon ? '' : 'no-icon']">
    <el-breadcrumb :separator-icon="ArrowRight" class="flex items-center">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="item.path">
          <div class="el-breadcrumb__inner is-link" :class="{ 'item-no-icon': !item.meta.icon }" @click="onBreadcrumbClick(item, index)">
            <svg-icon v-if="appStore.breadcrumbIcon && item.meta.icon" :icon="item.meta.icon" class="breadcrumb-icon" />
            <span class="breadcrumb-title">{{ item.meta.title }}</span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<style lang="scss" scoped>
.breadcrumb {
  .el-breadcrumb {
    height: 20px;

    .el-breadcrumb__item {
      position: relative;
      display: inline-block;
      float: none;

      .item-no-icon {
        transform: translateY(-3px);
      }

      .el-breadcrumb__inner {
        display: inline-flex;

        &.is-link {
          color: var(--el-header-text-color);

          &:hover {
            color: var(--el-color-primary);
          }
        }

        .breadcrumb-icon {
          margin-top: 1px;
          margin-right: 6px;
          font-size: 16px;
        }

        .breadcrumb-title {
          margin-top: 2px;
        }
      }

      &:last-child .el-breadcrumb__inner,
      &:last-child .el-breadcrumb__inner:hover {
        color: var(--el-header-text-color-regular);
      }

      :deep(.el-breadcrumb__separator) {
        transform: translateY(-1px);
      }
    }
  }
}

.no-icon {
  .el-breadcrumb {
    .el-breadcrumb__item {
      top: -2px;

      :deep(.el-breadcrumb__separator) {
        top: 4px;
      }

      .item-no-icon {
        transform: translateY(0);
      }
    }
  }
}

/* breadcrumb transition */
.breadcrumb-enter-active {
  transition: all 0.4s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(10px);
}
</style>
